<template>
	<view>
		<!-- 搜索组件 -->
		<view class="search-box">
			<my-search @myclick="goToSearch()"></my-search>
		</view>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item v-for="(item,index) in swiperListData" :key="index">
				<navigator class="swiper-item" :url="'/subPkg/goods_detail/goods_detail?goods_id='+item.goods_id">
					<image :src="item.image_src" mode=""></image>
				</navigator>
			</swiper-item>

		</swiper>
	</view>
	<!-- 分类导航区域 -->
	<view class="nav-list">
		<view class="nav-item" v-for="(item,index) in navListData " :key="index" @click="navItemClick(item)">
			<image :src="item.image_src"></image>
		</view>
	</view>
	<!-- 楼层数据区域 -->
	<view class="floor-list">
		<view class="floor-item" v-for="(item,index) in floorListData" :key="index">
			<!-- 楼层标题 -->
			<image :src="item.floor_title.image_src" class="floor-title-img"></image>
			<!-- 楼层内容 -->
			<view class="floor-img-box">
				<navigator class="left-floor-box" :url="item.product_list[0].url">
					<image :src="item.product_list[0].image_src" mode="widthFix" :style="{width:item.product_list[0].image_width+'rpx'}" ></image>
				</navigator>
				<view class="rigth-floor-box">
					<navigator :url="itemImg.url" class="right-floor-item" v-for="(itemImg,indexImg) in item.product_list" :key="indexImg">
						<image :src="itemImg.image_src" mode="widthFix" v-if="indexImg!==0" :style="{width:itemImg.image_width+'rpx'}"></image>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 导入maxins--自定义tabBar购物车右上角数字徽标组件
	import badgeMix from '@/mixins/maxins.js'
	
	export default {
		// 使用自定义maxins
		mixins:[badgeMix],
		data() {
			return {
				// 轮播图数据
				swiperListData:[],
				// 导航数据
				navListData:[],
				// 楼层数据
				floorListData:[]
			};
		},
		methods:{
			// 获取轮播图数据方法
			async getSwiperListData(){
				const {data} = await uni.$http.get('/api/public/v1/home/swiperdata')
				// 请求失败
				if(data.meta.status!==200){
					return uni.$showMsg()
				}
				this.swiperListData=data.message
			},
			// 获取导航栏数据方法
			async getNavListData(){
				const {data} = await uni.$http.get('/api/public/v1/home/catitems')
				if(data.meta.status!==200){
					return uni.$showMsg()
				}
				this.navListData=data.message
			},
			// 导航栏点击方法
			navItemClick(item){
				if(item.name==='分类'){
					uni.switchTab({
						"url":"/pages/cate/cate"
					})
				}
			},
			// 获得楼层数据方法
			async getFloorListData(){
				const {data} = await uni.$http.get('/api/public/v1/home/floordata')
				if(data.meta.status!==200){
					return uni.$showMsg()
				}
				data.message.forEach(floor=>{
					floor.product_list.forEach(prod=>{
						prod.url='/subPkg/goods_list/goods_list?'+prod.navigator_url.split('?')[1]
					})
				})
				this.floorListData=data.message
			},
			// 搜索跳转
			goToSearch(){
				uni.navigateTo({
					url:'/subPkg/search/search'
				})
			}
		},
		onLoad(){
			this.getSwiperListData()
			this.getNavListData()
			this.getFloorListData()
		}
	}
</script>

<style lang="scss">
swiper{
	height: 330rpx;
	.swiper-item,
	image{
		width: 100%;
		height: 100%;
	}
}

.nav-list{
	display: flex;
	justify-content: space-around;
	margin: 15px 0px;
	.nav-item{
		width: 128rpx;
		height: 140rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
}

.floor-list{
	.floor-item{
		.floor-title-img{
			width: 100%;
			height: 60rpx;
		}
		.floor-img-box{
			padding-left: 10rpx;
			display: flex;
			.rigth-floor-box{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
			}
		}
	}
}

.search-box{
	position: static;
	top: 0;
	z-index: 999;
}
</style>
